<template>
  <div class="alarm-row row">
    <span class="item">
      <span class="circle"></span>
      <span>{{ label }}</span>
    </span>
    <span class="item">
      <alert-icon v-if="todoNum" class="icon"></alert-icon>
      <img v-else src="@/assets/icon/20191022154231.png" class="icon" />
      <el-button size="mini">{{ alarmNum || '无' }}</el-button>
    </span>
  </div>
</template>

<script>
import AlertIcon from "./AlertIcon";
export default {
  components: {
    AlertIcon
  },
  props: {
    label: {
      type: String,
      required: true
    },
    alarmNum: {
      type: Number,
      default: 0
    },
    todoNum: {
      type: Number,
      default: 0
    }
  }
};
</script>

<style lang="scss" scoped>
.row {
  .icon {
    margin-right: 20px;
  }
  .item {
    display: flex;
    align-items: center;
    .el-button {
      width: 50px;
    }
  }
  .circle {
    display: inline-block;
    margin-right: 12px;
    background: #ddeaf4;
    width: 10px;
    height: 10px;
    border-radius: 5px;
  }
}
</style>
